<template>
  <div class="appWrap" :class="{ backColor: activeId == '' }">
    <div class="content" v-if="activeId == ''">
      <a-row :gutter="[36, 24]">
        <a-col :span="8" v-for="(item, index) in list" :key="index" @click="handClick(item)">
          <div class="itemBox hovers" :class="{ isDevelop: item.isDevelop }">
            <div class="headIcon">
              <template v-if="!item.icon.includes('icon-')">
                <a-icon :type="item.icon" style="font-size: 80px; color: #1890ff" />
              </template>
              <template v-else>
                <ZSIcon :icon="item.icon" :symbol="true" :styles="{ fontSize: '80px' }">
                </ZSIcon>
              </template>
            </div>
            <div class="info">
              <div class="info-row">
                <span class="info-title">应用名称</span>
                <span class="info-name">{{ item.name }}</span>
              </div>
              <!-- <div class="info-row">
                <span class="info-title">使用单位</span>
                <span class="info-name">{{ item.ascription }}</span>
              </div> -->
              <div class="info-row">
                <span class="info-title">应用简介</span>
                <span class="info-name">{{ item.introduce }}</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <template v-else>
      <PPTWrap v-if="Number(activeId) == 99700" :menuId="activeId"></PPTWrap>
      <Tables :menuId="activeId" v-else :otherProps="otherProps"></Tables>
    </template>

  </div>
</template>
<script>
import Tables from "./Tables";
import PPTWrap from './PPTWrap';
import ZSIcon from '@/components/ZSIcon/ZSIcon.vue';
export default {
  name: "",
  components: {
    Tables,
    PPTWrap,
    ZSIcon,
  },
  data() {
    return {
      ids: "",
      list: [
        // {
        //   id: "4",
        //   name: "隐患排查治理数字化管控平台",
        //   ascription: "西联、烟台矿石、青岛董矿、前港",
        //   introduce:
        //     "包含隐患排查数据台账展示、台账导出、数据分析、月度分析报告等功能的综合平台",
        //   icon: "icon-yinhuanpaicha",
        //   isDevelop: false,
        // },
        {
          id: "2",
          name: "流程分析",
          ascription: "--",
          introduce: "选择流程以及日期的月份进行对当月的数据统计，可视化数据分析",
          icon: "icon-liuchengfenxi_liuchengzhuangtaifenxi",
          isDevelop: false,
        },
        {
          id: "993",
          name: "知识库",
          ascription: "智隼",
          introduce: `选择目录结构，通过表格展示相应下面的文件`,
          icon: "icon-zhishiku",
          isDevelop: false,
        },
        // {
        //   id: "994",
        //   name: "灭火器",
        //   ascription: "前港",
        //   introduce: `通过表格展示灭火器位置以及对应的巡检未巡检`,
        //   icon: "sliders",
        //   isDevelop: false,
        // },
        {
          id: "995",
          name: "前港阀门仪表维护",
          ascription: "前港",
          introduce: `通过表格展示阀门仪表巡检未巡检`,
          icon: "icon-yaliji",
          isDevelop: false,
        },
        {
          id: "99700",
          name: "西联昼夜安全评价",
          ascription: "西联",
          introduce: `通过整改前、整改后图片展示西联昼夜安全评价`,
          icon: "icon-icon_anquanpingjia",
          isDevelop: false,
        },
        {
          id: "996",
          name: "董矿隐患设备维护",
          ascription: "董矿",
          introduce: `董矿隐患设备维护发送消息`,
          icon: "icon-shebeiweihu",
          isDevelop: false,
        },
        {
          id: "997",
          name: "QQCTN隐患分析",
          ascription: "QQCTN",
          introduce: `QQCTN隐患分析(隐患排查统计分析、热点问题TOP)`,
          icon: "icon-yinhuanfenxi",
          isDevelop: false,
        },
        // {
        //   id: "977",
        //   name: "灭火器材数字化管控平台",
        //   ascription: "前港",
        //   introduce: `灭火器基础数据维护以及信息预警提醒`,
        //   icon: "icon-a-1f9ef",
        //   isDevelop: false,
        // },
        {
          id: "18",
          name: "流程数据分析",
          ascription: "",
          introduce: `流程数据分析(周分析、未闭环分析)`,
          icon: "icon-shujubiao",
          isDevelop: false,
          otherProps: {
            type: 'week'
          }
        },
        // {
        //   id: "9978",
        //   name: "巡检流程挖掘",
        //   ascription: "",
        //   introduce: `巡检流程挖掘(针对不同流程进行针对性分析)`,
        //   icon: "icon-shuzikanban",
        //   isDevelop: false,
        //   otherProps: {
        //     type: 'week'
        //   }
        // },
        {
          id: "9979",
          name: "巡检流程提醒",
          ascription: "",
          introduce: `巡检流程提醒(针对不同流程设置不同提醒时间)`,
          icon: "icon-tixing",
          isDevelop: false,
          otherProps: {
            type: 'week'
          }
        },
      ],
      activeId: "",
    };
  },
  methods: {
    handClick(e) {
      if (e.id && !e.isDevelop) {
        this.activeId = e.id;
        this.$bus.$emit("headInfo", e.name, true);
      } else {
        this.$message.warning("开发中~~~");
      }
    },
    appChangeActive() {
      this.activeId = "";
      let menu = localStorage.getItem("menu") ? JSON.parse(localStorage.getItem("menu")) : [];
      let str;
      if (Array.isArray(menu) && menu.length > 0) {
        let item = menu.find((val) => val.id == this.ids);
        if (item) {
          str = item.name;
        }
      }
      this.$bus.$emit("headInfo", str);
    },
  },
  created() {
    this.$bus.$on("appChangeActive", this.appChangeActive);
  },
  mounted() {
    if (this.$route.query.id) {
      this.ids = this.$route.query.id;
    }
  },
  // 销毁
  beforeDestroy() {
    this.$bus.$off("appChangeActive");
  },
  computed: {
    otherProps() {
      // 流程分析中用到的，后面别的组件需要的数据都放在这里，然后取就行了
      let info = this.list.find(v => v.id == this.activeId)
      let res = info['otherProps'] || {};
      return res;
    }
  }
};
</script>
<style lang="less" scoped>
.backColor {
  background-color: #ffffff;
}

.appWrap {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  .content {
    padding: 10px 10px 0px 10px;
  }

  .itemBox {
    padding: 10px;
    width: 100%;
    height: 130px;
    border: 1px solid #cdcdcd;
    border-radius: 10px;
    display: flex;

    .headIcon {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .info {
      margin-left: 12px;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      //   background-color: orange;
      &-row {
        min-height: 24px;

        .info-title {
          font-weight: 800;
        }

        .info-name {
          margin-left: 24px;
        }
      }
    }
  }

  .itemBox:hover {
    box-shadow: 0 0 1px 1px #cdcdcd;
  }
}

.isDevelop {
  position: relative;
  overflow: hidden;

  &::before {
    content: "开发中";
    color: #ffffff;
    font-weight: 600;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 80px;
    height: 20px;
    background-color: orange;
    text-align: center;
  }
}
</style>
